<template>
<div class="data-gather">
<grid-layout
        :layout.sync="layout"
        :col-num="12"
        :row-height="30"
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :responsive="true"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
        @layout-created="layoutCreatedEvent"
>
    <grid-item v-for="item in layout"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :key="item.i"
                style="overflow:hidden"
                @resize="resizemoving"
                @resized="resizeEvent"
                @moved="movedEvent"
                >
      <small-card v-if="!item.draggabled" :data="item.energyInfo"></small-card>
      <big-card v-else @returnInit="returnInit" :index="item.i" :data="item.energyInfo"></big-card>
    </grid-item>
</grid-layout>
</div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
import smallCard from '../components/smallCard.vue'
import bigCard from '../components/bigCard.vue'
export default {
    data() {
      return {
        layout:[],
        list: [
          {
            accumulatedEnergy: { // 当天累计累计使用能源
              number: 2000, // 累计值
              data: { // 柱状图的数据
                categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // x轴数据
                values: { // y轴数据
                  Email: [120, 132, 101, 134, 90, 230, 210],
                  "Union Ads": [220, 182, 191, 234, 290, 330, 310],
                  "Video Ads": [150, 232, 201, 154, 190, 330, 410],
                  Direct: [320, 332, 301, 334, 390, 330, 320],
                },
              }
            },
            energySameRadio: { // 设备能源消耗同比
              number: 2000,
              isAdd: false, // 同比上升 还是下降的标识
              data: {
                categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                values: {
                  Email: [120, 132, 101, 134, 90, 230, 210],
                  "Union Ads": [220, 182, 191, 234, 290, 330, 310],
                  "Video Ads": [150, 232, 201, 154, 190, 330, 410],
                  Direct: [320, 332, 301, 334, 390, 330, 320],
                },
              }
            },
            energyChainRadio: { // 设备能源消耗环比
              number: 2000,
              isAdd: false, // 环比上升 还是下降的标识
              data: {
                categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                values: {
                  Email: [120, 132, 101, 134, 90, 230, 210],
                  "Union Ads": [220, 182, 191, 234, 290, 330, 310],
                  "Video Ads": [150, 232, 201, 154, 190, 330, 410],
                  Direct: [320, 332, 301, 334, 390, 330, 320],
                },
              }
            }
          }
        ]
      }
    },
    components: {
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem,
        smallCard,
        bigCard
    },
    created() {
    },
    beforeDestroy() {
    },
    methods: {
      layoutCreatedEvent() {
        let curDate = this.tools.dayjs().format("YYYY-MM-DD");
        let timeRange = [`${curDate} 00:00:00`,`${curDate} 23:59:59`]
        let obj = {
          timeRange,
          beginTime: timeRange[0],
          endTime: timeRange[1],
          scale: '天'
        }
        this.$api.Custom.energyCard(obj).then((res) => {
          if (!res) {
            return;
          }
          this.list = res
          this.layout = []
          for(let j = 0; j<this.list.length; j++) {
              let item = this.list[j]
              item.accumulatedEnergy.data.values = this.transValues(item.accumulatedEnergy.data.values)
              item.energySameRadio.data.values = this.transValues(item.energySameRadio.data.values)
              item.energyChainRadio.data.values = this.transValues(item.energyChainRadio.data.values)
              this.layout.push({
                  x: (this.layout.length * 3) % 12,
                  y: this.layout.length + 12, // puts it at the bottom
                  w: 3,
                  h: 5,
                  i: j,
                  draggabled: false,
                  energyInfo: item
              });
          }
        });
      },
      // 调整大小时
      resizemoving() {
        // this.initWH()
      },
      // 调整大小的事件
      resizeEvent(i, newH, newW, newHPx, newWPx) {
        let targetObj = this.layout.find(item => item.i === i)
        let index = this.layout.findIndex(item => item.i === i)
        this.initWH()
        // w9 + h18 + x0 y0
        if(newHPx >= 300 && newWPx >= 800) {
          let obj = structuredClone(targetObj)
          obj.w = 9
          obj.h = 20
          obj.draggabled = true
          this.$nextTick(() => {
            this.$set(this.layout, index, obj)
          })
        } else {
          let obj = structuredClone(targetObj)
          obj.draggabled = false
          this.$nextTick(() => {
            this.$set(this.layout, index, obj)
          })
        }
      },
      // 移动之后的事件
      movedEvent(i, newX, newY) {
        // this.initWH()
      },
      // 初始化宽高
      initWH() {
        this.layout.forEach(item => {
          item.w = 3
          item.h = 5
          item.draggabled = false
        })
      },
      // 返回
      returnInit(i) {
        let targetObj = this.layout.find(item => item.i === i)
        let index = this.layout.findIndex(item => item.i === i)
        let obj = structuredClone(targetObj)
        obj.w = 3
        obj.h = 5
        obj.draggabled = false
        this.$nextTick(() => {
          this.$set(this.layout, index, obj)
        })
      },
      transValues(values = []) {
        let obj = {};
        values.forEach((d) => {
          obj[d.name] = d.data;
        });
        return obj;
      }
    }
}
</script>

<style lang="less" scoped>
.data-gather {
  height: 85vh !important;
  overflow: auto;
}
</style>
